<template lang="pug">
div.dww(v-loading="registrationsLoading")
  el-row.dww-row-tag
    el-tag(v-for=" item in registrationList",closable,:type="item.type",@click="itemTagClick(item.id)") {{ item.name + " " + item.age + "岁 " + item.sex }}
  el-row.dww-row-img(:gutter="10")
    el-col(:span="18")
      mt-card
        dwv(:selectItemTag="selectItemTag",ref="RefDwv")
    el-col(:span="6")
      mt-card
        mt-tabs(v-model="activeName")
          mt-tab-pane(name="检查信息",label="检查信息" )
            conclusion(ref="conclusionRef",:selectItemTag="selectItemTag",@handleSave="handleSave")
          mt-tab-pane(name="历史检查",label="历史检查" )
            historyConclusion(ref="historyConclusionRef",:selectItemTag="selectItemTag")

</template>
<script setup lang="ts">
//@ts-ignore
import dwv from "./components/dwv.vue";
import historyConclusion from "./components/historyConclusion.vue";
import conclusion from "./components/conclusion.vue";
import { useRoute } from "vue-router";
import { useRequest } from "@scmt/common-hooks";
import { useApi } from "@scmt/core-api";
import {
  useNotify,
} from "@scmt/common-components";
const $api = useApi();
const $notify = useNotify();
const activeName = ref("检查信息");
const RefDwv = ref<InstanceType<typeof dwv>>();
const $route = useRoute();
const registrationIds = ref("");
const selectItemTag = ref({});
const registrationList = ref([{ id: "", name: "", sex: "", age: "", type: "" }]);
const { request, data, loadingMap } = useRequest({
  registrations: () => {
    return $api.pacs.registration.queryByIds(registrationIds.value);
  }
});

//添加 Props属性
const props = defineProps({
  registrationIds: {
    type: String,
    defaulte: ""
  },
});
//定义事件
const emit = defineEmits(['handleSave']);

const registrationsLoading = ref(loadingMap.registrations ?? false);
/**
 * 登记单 Tag 点击事件
 */
const itemTagClick = (id: string) => {
  registrationList.value.forEach((item) => {
    item.type = "info";
  });
  let filter = registrationList.value.filter(i => id == i.id);
  if (filter && filter.length > 0) {
    filter[0].type = "";
    let resItems = data.registrations ?? [];
    resItems.forEach((item) => {
      if (item) {
        let entity = $api.pacs.registration.$$createEntity(item);
        if (entity.id == id) {
          selectItemTag.value = entity;
          return;
        }
      }
    });

  }
}
/**
 * 结论保存触发
 */
const handleSave = () => {
  if (RefDwv.value) {
    RefDwv.value.saveImage();
    emit("handleSave");
  }
}
//初始化
const init = () => {
  request("registrations").then(() => {
    let resItems = data.registrations ?? [];
    registrationList.value = [];
    if (resItems.length == 0) {
      $notify.error("查询登记单信息失败！！！");
      return
    }
    let i = 0;
    resItems.forEach((item) => {
      if (item) {
        let entity = $api.pacs.registration.$$createEntity(item);
        let type = "info";
        if (i === 0) {
          type = "";
          selectItemTag.value = entity;
        }
        registrationList.value.push({
          id: entity.id,
          name: entity.name,
          sex: entity.sex,
          age: entity.age,
          type: type
        });
        i++;
      }
    })

  });
}
//网页加载完毕执行
onMounted(() => {
  registrationIds.value = $route.query.registrationIds ? "" + $route.query.registrationIds : "";
  registrationIds.value = registrationIds.value.replace('"', "").replace('"', "");
  if (registrationIds.value && registrationIds.value.trim().length > 0) {
    init();
  }
});
watch(
  () => props.registrationIds,
  (item: any) => {
    if (item) {
      registrationIds.value = item;
      if (registrationIds.value && registrationIds.value.trim().length > 0) {
        init();
      }
    }
  },
  {
    immediate: true,
  }
);
</script>

<style lang="less" scoped>
.dww {
  width: 100%;
  height: 100%;

  &-row-img {
    height: calc(100% - 42px);

  }

  &-row-tag {
    padding: 5px;

    .el-tag {
      cursor: pointer;
      height: 32px;
      line-height: 32px;
      font-size: 16px;
    }

  }

  .el-col {
    height: 100%;
  }

  .el-tag {
    margin-right: 10px;
  }
}
</style>
